<template>
  <div ref="imageTofile" class="big_box" v-loading="loading">
    <home-header></home-header>
    <work-status></work-status>
    <warning-chart></warning-chart>
    <problem-speake></problem-speake>
    <abnormal-warning></abnormal-warning>
    <div class="bottom">
      <div>分享</div>
      <div @click="toImage">生成监测报告</div>
    </div>
  </div>
</template>

<script>
import HomeHeader from '@/components/HomeView/HomeHeader.vue';
import WorkStatus from '@/components/HomeView/WorkStatus.vue';
import WarningChart from '@/components/HomeView/WarningChart.vue';
import ProblemSpeake from '@/components/HomeView/ProblemSpeake.vue';
import AbnormalWarning from '@/components/HomeView/AbnormalWarning.vue';
import html2canvas from 'html2canvas';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeHeader,
    WorkStatus,
    WarningChart,
    ProblemSpeake,
    AbnormalWarning
  },
  data() {
    //这里存放数据
    return {
      loading: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 页面元素转图片
    toImage() {
      this.loading = true;
      // 手动创建一个 canvas 标签
      const canvas = document.createElement('canvas');
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      let canvasBox = this.$refs.imageTofile;
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      const context = canvas.getContext('2d');
      context.scale(2, 2);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      };
      html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL('image/png');
        this.downloadImage(dataURL);
      });
    },
    //下载图片
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement('a');
      a.href = url;
      a.download = '监测报告';
      a.click();
      this.loading = false;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang="less">
.big_box {
  background-color: #f6f8fb;
}
.bottom {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
  div {
    width: 100px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    background-color: #fff;
    line-height: 30px;
    border: 1px solid #666;
    border-radius: 10px;
    margin-left: 20px;
  }
}
</style>
